<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>

    <!-- 引入ElementUI的样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        /*
            设置body样式

        */
        body{
            margin: 0px;/*设置上下左右空白距离为0*/
        }
        /*
            设置index-container  div样式
        */
        .index-container{
            margin: 0 auto;/*设置div居中*/
            width: 85%;/*设置宽度,使用百分比设置*/
            min-width: 1024px;/*设置最小宽度*/
        }



        /*
                ElementUI提供的样式
                设置el-header，el-footer两个标签的样式

            */
        .el-header, .el-footer {
            background-color: #606266;
            color: #333;
            line-height: 60px;
        }

        .el-header{
            background-color: lightblue;
            display: flex;
        }

        .el-footer{
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            font-family: 宋体;
            letter-spacing: 3px;
            color: white;

        }

        .el-header .logo{
            border: 0px solid red;
            width: 50%;
            height: 100%;
            padding-left: 50px;
        }

        .logo span{
            margin-top:-30px;
            position: relative;
            top:-17px;
            display: inline-block;
            border: 0px solid red;
            height: 100%;
            line-height: 60px;
            font-size: 30px;
            font-weight: bold;
        }

        .el-header .user_info{
            border: 0px solid blue;
            width: 50%;
            height: 100%;
            text-align: right;
            padding-right: 30px;
        }
        /**
          ElementUI提供的样式
          设置el-main样式
         */
        .el-main {
            /*background-color: #E9EEF3;*/
            color: #333;
        }

        .toy-container{
            display: flex;/*设置div为弹性布局*/
            flex-direction: column;/*设置内容为上下结构*/
            align-items: center;
            border: 0px solid red;
            width: 100%;

        }

        .toy-container .toy-desc-container{
            /* display: flex;设置弹性布局，默认为横向布局*/
            border: 0px solid blue;
            width: 95%;

        }
        .toy-desc-container .toy-base{
            display: flex;
            width: 100%;
            margin-bottom: 20px;

        }

        .toy-base .toy-image{
            width: 80%;
            text-align: right;
        }
        .toy-base .toy-info{
            width: 20%;

        }
        .toy-desc-container .toy-desc{
            width: 100%;
            margin-bottom: 20px;
        }

        .toy-desc .toy-desc-title{
            width: 100%;
            height: 30px;
            line-height: 30px;
            background-color: dodgerblue;
            color: white;
            font-weight: bold;
            font-size: 18px;
            text-indent:20px
        }
        .toy-desc .toy-desc-info{
            font-size: 14px;
            line-height: 30px;
            text-indent:20px;
        }


        .toy-container .toy-comment{
            border: 0px solid green;
            width: 100%;

        }


        a:link{
            text-decoration: none;
            color: dodgerblue;
            font-weight: bold;
        }
        a:visited{
            text-decoration: none;
            color: dodgerblue;
            font-weight: bold;
        }
        a:hover{
            color: red;
            font-weight: bold;
        }


        .toy-comment-title{
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: #7088ff;
            color: white;
            font-size: 18px;
            font-weight: bold;
            text-indent:20px;
            letter-spacing: 2px;


        }

        .toy-comment-message{
            display: flex;
            width: 100%;
            height: 100%;
            border: 1px solid #7088ff;
        }
        .toy-comment-message-title{
            width: 20%;
            background-color: lightskyblue;
            color: black;
            height: 80px;
        }

        .toy-comment-message-title div{
            width: 100%;
            height: 40px;
            font-size: 14px;
            line-height: 40px;
            text-indent: 20px;

        }
        .toy-comment-message-content,.toy-comment-null{
            text-indent: 20px;
            line-height: 26px;
            font-size: 14px;
            letter-spacing: 1px;
        }
    </style>

</head>
<body>
<div id="toy-container" class="index-container">

    <el-container>
        <el-header>
            <div class="logo">
                <img src="images/logo.png" style="height:60px ">
                <span>童趣玩具店</span>
            </div>
            <div class="user_info" >
                <!--
                    v-if:vue的if指令
                    当v-if为true时显示当前标签，为false不显示当前标签
                -->
                <div class="user_operate" v-if="curUser==null">
                    <a href="register.html">用户注册</a>
                    <a href="login.html">用户登录</a>
                </div>

                <div class="user_info_div" v-if="curUser!=null">
                        <span style="margin-right:10px">
                            <label style="color: red">欢迎您:</label>
                            <label style="color: blue">{{curUser.user_name}}</label>
                        </span>

                    <el-button type="danger" plain size="mini" @click="exit">退出</el-button>
                </div>

            </div>
        </el-header>
        <!--商品信息展示区-->
        <el-main>
            <div class="toy-container">
                <!--商品详情区-->
                <div class="toy-desc-container">
                    <!--商品基本信息-->
                    <div class="toy-base">
                        <div class="toy-image">
                            <img :src="'images/toys/'+toy.toy_image" width="100%" height="100%">
                        </div>
                        <div class="toy-info">
                            <p>{{toy.toy_name}}</p>
                            <p>单价:¥{{toy.toy_price}}</p>
                            <div style="margin: 5px">
                                <el-input-number v-model="car.car_count" :min="1"></el-input-number>
                            </div>

                            <el-button type="warning" plain  icon="el-icon-shopping-cart-full" @click="addCar">加入购物车</el-button>
                            <el-button type="success" plain  icon="el-icon-present">购买</el-button>

                        </div>
                    </div>
                    <!--商品描述-->
                    <div class="toy-desc">
                        <div class="toy-desc-title">
                            玩具描述
                        </div>
                        <div class="toy-desc-info">
                            {{toy.toy_desc}}
                        </div>
                    </div>
                </div>
                <!--评论区-->
                <div class="toy-comment">
                    <div class="toy-comment-title">
                        商品评论
                    </div>

                    <div class="toy-comment-add">
                        <div>
                            <el-input
                                    type="textarea"
                                    :rows="3"
                                    placeholder="请输入评论内容"
                                    v-model="toyComment.comment_message"
                                    :disabled="curUser==null">
                            </el-input>
                        </div>
                        <div style="text-align: right;margin: 10px">
                            <el-button type="primary" :disabled="curUser==null" @click="addComment">发布评论</el-button>
                        </div>


                    </div>


                    <!--评论信息区-->
                    <div>
                        <div class="toy-comment-null" v-show="toyCommentList.length==0">
                            暂无评论
                        </div>
                        <div class="toy-comment-message" v-for="commentView in toyCommentList" v-show="toyCommentList.length!=0">
                            <div class="toy-comment-message-title">
                                <div style="border-bottom: 1px solid #7088ff">
                                    时间:<label style="margin-left: 10px">{{commentView.comment_time}}</label>
                                </div>
                                <div>
                                    评论人:<label  style="margin-left: 10px">{{commentView.user_name}}</label>
                                </div>
                            </div>

                            <div class="toy-comment-message-content">
                                {{commentView.comment_message}}
                            </div>

                        </div>


                    </div>
                </div>
            </div>
        </el-main>
        <el-footer>童趣玩具店所有</el-footer>
    </el-container>

</div>

<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/sweetalert2.js"></script>
<script>
    /**
     * 创建Vue对象，并对vue进行配置
     * 在vue的构造器中配置
     */
    new Vue({
        //用于配置vue要渲染的元素,在el指定的元素中vue可以起作用,脱离指定元素，vue无效,vue的渲染元素可以为任意元素，一般是div
        el:'#toy-container',
        data(){//vue的数据区，等同于java类中的属性
            return{
                curUser:null,//当前登录者对象
                toy_id:-1,//默认值为-1
                toy:null,//图书对象
                car:{
                    car_count:1
                },
                toyComment:{},//图书评论对象
                toyCommentList:[]//当前图书的评论信息
            }
        },
        methods:{//vue的方法区,在方法区中定义方法，这些方法类似与java中的方法
            /**
             * 获得当前登录者信息
             */
            getCurUser(){
                //从sessionStorage中获得curUser的值，值为一个字符串
                let curUserStr = window.sessionStorage.getItem("curUser");
                if(curUserStr){
                    //将JSON格式的字符串解析为一个JSON对象
                    this.curUser = JSON.parse(curUserStr);
                    // console.log(this.curUser.user_name);
                }

            },
            /**
             * 退出登录
             */
            exit(){
                //使用ajax向服务端发送退出请求
                axios.delete('user/exit')
                    .then(response=>{
                        let result = response.data;
                        if(result.success){
                            //将浏览器的sessionStorage中存储的用户登录信息移除
                            window.sessionStorage.removeItem("curUser");//根据key移除对应的属性
                            //使用ElementUI的弹框组件实现
                            this.$message({
                                message: result.message,
                                type: 'success',
                                duration:500,//设置延迟关闭时间(毫秒)
                                onClose:()=>{//当弹框关闭后要执行的函数
                                    this.curUser = null;//重置curUser对象为null
                                }
                            });
                        }
                    })
                    .catch(err=>{
                        alert(err);
                    });
            },

            /**
             * 获得超链接传入的参数值
             */
            getParam(){
                let url = location.search;//获得超链接中的参数
                url = url.substring(1);//去掉url中的?号
                let params = url.split("=");//使用=分割参数
                this.toy_id = params[1];//获得参数的值
            },
            /**
             * 访问服务端获得商品详情(商品对象)
             */
            getToyDesc(){
                if(this.toy_id==-1){//参数失效
                    return;
                }
                axios.get('toys/getToyDesc?toy_id='+this.toy_id)
                    .then(response=>{
                        this.toy = response.data;
                    })
                    .catch(err=>{
                        alert(err);
                    });
            },
            /**
             * 获得图书评论信息
             */
            getToyComment(){
                axios.get('toys/comment/getToyComment?toy_id='+this.toy_id)
                    .then(response=>{
                        this.toyCommentList = response.data;//获得服务端回传的结果给commentList数组
                    })
                    .catch(err=>{
                        alert(err);
                    });
            },
            /**
             * 发布评论
             */
            addComment(){
                if(this.curUser!=null){//用户已登录，则将用户编号添加到bookComment对象中
                    this.toyComment.user_id=this.curUser.user_id;
                    this.toyComment.toy_id=this.toy_id;//将toy_id设置bookComment对象的toy_id属性中
                }
                axios.post('toys/comment/addComment',this.toyComment)
                    .then(response=>{
                        let result = response.data;
                        console.log(result);
                        if(result.success){
                            //使用sweetalert2弹框组件，弹框
                            Swal.fire({
                                icon: 'success',//图标
                                title: result.message,//消息
                                showConfirmButton: false,//不显示确认按钮
                                timer: 1000,//延迟时间
                                willClose:()=>{//当弹框关闭时执行的函数
                                    this.toyComment={};//情况bookComment评论对象
                                    this.getToyComment();//刷新评论信息
                                }
                            });
                        }else{
                            if(result.statusCode==401){//表示未认证(未登录)
                                //从浏览器的session作用域中移除curUser
                                window.sessionStorage.removeItem("curUser");
                                this.curUser=null;

                                //使用sweetalert2弹框组件，弹框
                                Swal.fire({
                                    icon: 'error',//图标
                                    title: "请登录后发布评论",//消息
                                    showConfirmButton: false,//不显示确认按钮
                                    timer: 1000,//延迟时间
                                    willClose:()=>{//当弹框关闭时执行的函数
                                        this.toyComment={};//情况bookComment评论对象

                                    }
                                });

                            }
                        }
                    })
                    .catch(err=>{
                        alert(err);
                    });
            },

            /**
             * 添加购物车
             *  1.检测用户是否登录,未登录不允许添加购物车
             */
            addCar(){
                if(this.curUser==null){//用户未登录
                    //使用sweetalert2弹框组件，弹框
                    Swal.fire({
                        icon: 'error',//图标
                        title: "请登录后购买",//消息
                        showConfirmButton: false,//不显示确认按钮
                        timer: 1000,//延迟时间
                        willClose:()=>{//当弹框关闭时执行的函数
                            location.href="login.html";

                        }
                    });
                    return;
                }
                //创建car对象
                this.car.toy_id=this.toy_id;
                this.car.user_id=this.curUser.user_id;

                //用户已的登录,向服务端发送请求，将商品添加到购物车
                axios.post('car/addCar',this.car)
                    .then(response=>{
                        let result = response.data;
                        if(result.success){//添加成功
                            //使用sweetalert2弹框组件，弹框
                            Swal.fire({
                                icon: 'success',//图标
                                title: result.message,//消息
                                showConfirmButton: false,//不显示确认按钮
                                timer: 1000,
                                willClose:()=>{
                                    this.getCarCount();
                                }
                            });
                        }else{
                            if(result.statusCode==401){//表示未认证(未登录)
                                //从浏览器的session作用域中移除curUser
                                window.sessionStorage.removeItem("curUser");
                                this.curUser=null;

                                //使用sweetalert2弹框组件，弹框
                                Swal.fire({
                                    icon: 'error',//图标
                                    title: "请登录后购买",//消息
                                    showConfirmButton: false,//不显示确认按钮
                                    timer: 1000
                                });

                            }

                        }
                    })
                    .catch(err=>{
                        alert(err);
                    });







            }
        },
        created(){/*在页面加载后自动执行*/
            console.log("---11");
            console.log(location.search);
            console.log("---");
        },
        mounted(){/*DOM结构在内存中构建前执行*/
            this.getCurUser();//获得当前登录者信息
            //获得url传入的参数
            this.getParam();
            this.getToyDesc();
            this.getToyComment();


        }
    });
</script>
</body>
</html>